<template>
  <div id="home">
    <nva-bar class="home-nva">
      <div slot="left"></div>
      <div slot="center">购物街</div>
      <div slot="right"></div>
    </nva-bar>
   <tab-control :titles="['热门','新款','推荐']" :class="{tab_control_top:isTabFixed,tab_on:!isTabFixed}" @tabClick="tabClick" ref="tabControl1"></tab-control>
    <scroll class="content" ref="scrollhome" 
    :probe-type="3"
     @scroll="contentscroll" 
     :pull-up-load='true' 
     @pullingup="loadmore">
      <home-swiper :banners="banners" class="lunbu" @swiperImgeIoad="swiperImgeIoad"></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature-view></feature-view>
      <tab-control :titles="['热门','新款','推荐']" class="tab-control" @tabClick="tabClick" ref="tabControl2" ></tab-control>
      <goods-list :goods="showGoods"></goods-list>
       </scroll>
       <!-- native组件是不能监听点击的，想要监听就加这个 当然也可以用div包裹，只是有点low-->
       <back-top @click.native="backclick" v-show='ishowbacktop'></back-top>

  </div>
  
</template>

<script>

import Scroll from "@/components/common/scroll/Scroll.vue"
import tabControl from "@/components/content/tabControl/TabControl.vue"
import FeatureView from "./childComps/FeatureView.vue"
import RecommendView from "./childComps/RecommendView.vue"
import HomeSwiper from "./childComps/HomeSwiper.vue"
import {getHomeMultidata,getHomeGoods} from "@/network/home"
import NvaBar from '@/components/common/nvabar/NvaBar.vue'
import GoodsList from "@/components/content/goods/GoodsList.vue"
import backTop from "@/components/content/backTop/backTop"
export default {
    name:"Home",
    data(){
      return{
          banners:[],
      recommends:[],
      goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]},
      },
      current:'pop',
      ishowbacktop:false,
      tabOffsetTop:0,
      isTabFixed:false,
      saveY:0
      }
    }
    ,
    components:{
      NvaBar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      tabControl,
      GoodsList,
      Scroll,
      backTop

    },
    computed:{
      showGoods(){
        return this.goods[this.current].list
      }
    },
    methods:{
      // 事件监听
      tabClick(index){
        switch(index){
          case 0:
            this.current="pop"
            break
          case 1:
            this.current= "new"
            break
          case 2:
            this.current="sell"
        }
        this.$refs.tabControl1.currentIndex=index
        this.$refs.tabControl2.currentIndex=index

      },
      backclick(){
        // 父亲访问儿子
        // ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据
        this.$refs.scrollhome.scrollTo(0,0,1000)
      } ,
      contentscroll(position){
        // 判断backtop是否显示，（回到顶部的哪个小按键）
        this.ishowbacktop=(-position.y) >1000
        // 绝对tabControl是否吸顶
        this.isTabFixed= (-position.y) > this.tabOffsetTop

      },
      loadmore(){
        console.log('loadmore');
        this.getHomeGoods(this.current)
      },
      // 获取要改变样式组件的与顶部的距离
      swiperImgeIoad(){
        this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop-44
      },

      // 网络请求
      getHomeMultidata(){
         getHomeMultidata().then(res  =>{
        this.banners=res.data.banner.list;
        this.recommends=res.data.recommend.list; 
      })
      },

      getHomeGoods(type){
        const page=this.goods[type].page+1
              getHomeGoods(type,page).then(res =>{
            this.goods[type].list.push(...(res.data.list)) 
            this.goods[type].page+=1
            //为了多次加载更多
            this.$refs.scrollhome.finishPullUp_m()
               
      })
        }

    },
    created(){
        this.getHomeMultidata()
        this.getHomeGoods('pop')
        this.getHomeGoods('new')
        this.getHomeGoods('sell')

    },
    activated(){
      this.$refs.scrollhome.scrollTo(0,this.saveY,0)
    }
    ,
    deactivated(){
      this.saveY=this.$refs.scrollhome.scroll.y
    }

}
</script >

<style scoped>
#home{
  height: 100vh;
}
.home-nva{
  position: fixed;
  left: 0;
  right: 0;
  background-color: var(--color-tint);
  z-index: 999;
}
.lunbu{
  padding-top: 44px;
}

.tab-control{
  z-index: 1;
}

.content{
  height: calc(100%);
}
.tab_control_top{
  position: fixed;
  left: 0;
  right: 0;
  top: 44px;
  z-index: 999;
}
.tab_on{
  display: none;
}
</style>